import { useEffect, useState } from 'react'
import { format } from 'date-fns'

// 时钟
export function Clock () {

    const [ datetime, setDatetime ] = useState<Date>(new Date())

    //定时器只创建一个
    useEffect(() => {
        const timer = setInterval(() => setDatetime(new Date()), 1000)

        return () => clearInterval(timer)
    }, [])

    return (
        <div className={ 'p-20 bg-slate-300' }>
            <p className={ 'p-2 bg-purple-500 text-white w-fit' }>
                { format(datetime, 'yyyy-MM-dd HH:mm:ss') }
            </p>
        </div>
    )
}
